<template>
    <div >

              <div ref="musicplayer"  id="music-player" >
                    <aplayer
                    class="aplayer"
                    fixed
                    :lrcType="1"
                    :showLrc="true"
                    @pause="pauseEvent"
                    @playing="playEvent"
                    @error="errorEvent"
                    v-if="aplayerVisible"
                    ref="aplayer"
                    :listFolded  ='true'
                    listMaxHeight ="100px"
                        :music="music"
                        :list="musiclist"
                        />
            </div>

            <!-- listFolded歌曲列表折叠、listMaxHeight最大高度 -->
    </div>
</template>

<script>
export default {
  props: ['aplayerVisible', 'music', 'musiclist'],
  data () {
    return {
      //   控制播放器显示
    //   aplayerVisible: false
    //   music: {},
    //   musiclist: []
      show3: true
    }
  },
  created () {
  },
  methods: {
    // 监听播放器暂停事件，暂停时将play置为false，使得；列表中的icon变为播放icon
    pauseEvent (e) {
      console.log('pauseEvent:', e)
      var index = this.musiclist.indexOf(this.$refs.aplayer.currentMusic)
      console.log('index:', index)
      this.activeIndex = index
      this.play = false
      this.$emit('watch', this.activeIndex, this.play)
    },
    // 监听播放器播放事件，播放时将play置为true，使得；列表中的icon变为暂停icon
    playEvent (e) {
      console.log('playEvent:', e)
      var index = this.musiclist.indexOf(this.$refs.aplayer.currentMusic)
      //   console.log('index:', index)
      this.activeIndex = index
      this.play = true
      this.$emit('watch', this.activeIndex, this.play)
    },
    // 监听播放报错，失败时提示
    errorEvent (e) {
      console.log('errorEvent:', e)
      this.$message.error('播放失败，请刷新页面重试')
      this.play = false
      this.$emit('watch', this.activeIndex, this.play)
    }

  }
}
</script>

<style  scoped>
/* 播放器 固定在屏幕底部*/
#music-player{
    position: fixed;
    bottom: 0;
    width: 100%;
    /* height: 200px; */
    left: 0;

}

</style>
